<template>
	<view class="my-bg">
		<view class="pad-left-right-24">
			<view class="bg-white radius20 pad-40">
				<view class="form-box font-34">
					<up-form class="mar-top-30" labelWidth="100" :model="formData" :rules="rules" ref="ruleFrom">
						<up-form-item label="发票类型" class="mar-top-40">
							<up-radio-group v-model="formData.invoice_type">
								<up-radio :customStyle="{marginBottom: '8px'}" label="个人" :name="1" />
								<up-radio :customStyle="{marginBottom: '8px'}" label="公司" :name="2" />
							</up-radio-group>
						</up-form-item>
						<up-form-item label="发票抬头" prop="name">
							<up-input type="text" clearable placeholderClass="input-style"
								:placeholder="formData.invoice_type == 1? '人发票的抬头': '公司名称'" v-model="formData.name">
							</up-input>
						</up-form-item>
						<template v-if="formData.invoice_type == 2">
							<up-form-item label="税号" prop="tax_no">
								<up-input type="text" clearable placeholderClass="input-style" placeholder="请填写税号"
									v-model="formData.tax_no">
								</up-input>
							</up-form-item>
							<up-form-item label="公司注册地址" prop="company_address">
								<up-input type="text" clearable placeholderClass="input-style" placeholder="请填写公司注册地址"
									v-model="formData.company_address">
								</up-input>
							</up-form-item>
							<up-form-item label="公司电话" prop="company_phone">
								<up-input type="number" clearable placeholderClass="input-style" placeholder="请填写公司电话"
									v-model="formData.company_phone">
								</up-input>
							</up-form-item>
							<up-form-item label="开户行" prop="bank_name">
								<up-input type="text" clearable placeholderClass="input-style" placeholder="请填写开户行名称"
									v-model="formData.bank_name">
								</up-input>
							</up-form-item>
							<up-form-item label="开户行卡号" prop="bank_card_no">
								<up-input type="number" clearable placeholderClass="input-style" placeholder="请填写开户行卡号"
									v-model="formData.bank_card_no">
								</up-input>
							</up-form-item>
						</template>
					</up-form>
				</view>
				<view @click="submit" class="button-style">确认添加</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { invoiceTitleInfo, addInvoiceTitle, updateInvoiceTitle } from '@/api/user.js';

	const ruleFrom = ref(null);
	const param = ref({});
	const formData = reactive({
		invoice_type: 2,
		name: '',
		tax_no: '',
		company_address: '',
		company_phone: '',
		bank_name: '',
		bank_card_no: ''
	})

	// 表单校验规则
	const rules = ref({
		name: [{
			required: true,
			message: '请填写发票抬头',
			trigger: 'blur'
		}]
	})

	// 提交数据
	const submit = async () => {
		ruleFrom.value.validate().then(async valid => {
			if (valid) {
				if (param.value.id) {
					const res = await updateInvoiceTitle(formData);
					if (res.code == 200) {
						uni.$u.toast('修改成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					} else {
						uni.$u.toast(res.msg);
					}
				} else {
					const res = await addInvoiceTitle(formData);
					if (res.code == 200) {
						uni.$u.toast('添加成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					} else {
						uni.$u.toast(res.msg);
					}
				}

			}
		}).catch(error => {
			console.log('失败:', error);
		})
	}

	const getDetail = (id) => {
		invoiceTitleInfo({ id }).then(res => {
			let { id, invoice_type, name, tax_no, company_address, company_phone, bank_name, bank_card_no } =
			res
				.data?.info;
			formData.id = id;
			formData.invoice_type = invoice_type;
			formData.name = name;
			formData.tax_no = tax_no;
			formData.company_address = company_address;
			formData.company_phone = company_phone;
			formData.bank_name = bank_name;
			formData.bank_card_no = bank_card_no;
		})
	}

	onLoad((option) => {
		if (option.id) {
			param.value = option;
			getDetail(option.id);
			uni.setNavigationBarTitle({
				title: '修改抬头'
			})
		}
	})
</script>

<style scoped lang="scss">
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.button-style {
		padding: 21rpx 0;
		text-align: center;
		margin-top: 82rpx;
	}

	.button-code {
		padding: 7rpx 10rpx;
		background: $uni-color-primary;
		color: white;
		border-radius: 4rpx;
	}
</style>